<template>
  <div>
    <UseBreadcrumb>
      <el-breadcrumb-item
        v-for="item of ['商品管理', '添加商品']"
        :key="item"
        >{{ item }}</el-breadcrumb-item
      >
    </UseBreadcrumb>
    <el-card>
      <!-- 提示区域 -->
      <el-alert
        title="添加商品信息"
        type="success"
        :closable="false"
        effect="dark"
        show-icon
        center
      >
      </el-alert>
      <!-- 步骤条区域 -->
      <el-steps
        :space="200"
        :active="activeIndex - 0"
        finish-status="success"
        align-center=""
      >
        <el-step v-for="item of stepTitle" :title="item" :key="item"></el-step>
      </el-steps>
      <!-- tabs栏区域与添加商品的表单 -->
      <el-row>
        <el-col :span="24">
          <UseEleForm  :activeIndex.sync="activeIndex">
          </UseEleForm>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import UseBreadcrumb from '@/common_components/UseBreadcrumb.vue'
import UseEleForm from '@/common_components/UseEleForm.vue'
export default {
  data() {
    return {
      //步骤条数据
      stepTitle: [
        '基本信息',
        '商品参数',
        '商品属性',
        '商品图片',
        '商品内容',
        '完成'
      ],
      //步骤条激活index
      activeIndex: '0',
      //添加商品表单数据
      addForm: {}
    }
  },
  components: {
    UseBreadcrumb,
    UseEleForm
  }
}
</script>

<style lang="less" scope>
.el-steps {
  margin-top: 15px;
  margin-bottom: 15px;
}
.el-step__title {
  font-size: 12px;
}</style>
